<br>
<div class="title">
  <h2 class="text-left" i18n="transaction.related-transactions|CPFP List">Related Transactions</h2>
</div>
<div class="box cpfp-details">
  <table class="table table-fixed table-borderless table-striped">
    <thead>
      <tr>
        <th i18n="transactions-list.vout.scriptpubkey-type">Type</th>
        <th class="txids" i18n="dashboard.latest-transactions.txid">TXID</th>
        <th *only-vsize class="d-none d-lg-table-cell" i18n="transaction.vsize|Transaction Virtual Size">Virtual size</th>
        <th *only-weight class="d-none d-lg-table-cell" i18n="transaction.weight|Transaction Weight">Weight</th>
        <th i18n="transaction.fee-rate|Transaction fee rate">Fee rate</th>
        <th class="d-none d-lg-table-cell"></th>
      </tr>
    </thead>
    <tbody>
      <ng-template [ngIf]="cpfpInfo?.descendants?.length">
        <tr *ngFor="let cpfpTx of cpfpInfo.descendants; trackBy: trackByIndex">
          <td><span class="badge badge-primary" i18n="transaction.descendant|Descendant">Descendant</span></td>
          <td>
            <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
          </td>
          <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
          <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight | wuBytes: 2"></td>
          <td><app-fee-rate [fee]="cpfpTx.fee" [weight]="cpfpTx.weight"></app-fee-rate></td>
          <td class="d-none d-lg-table-cell"><fa-icon  *ngIf="roundToOneDecimal(cpfpTx) > roundToOneDecimal(tx)"  class="arrow-green" [icon]="['fas', 'angle-double-up']" [fixedWidth]="true"></fa-icon></td>
        </tr>
      </ng-template>
      <ng-template [ngIf]="cpfpInfo?.bestDescendant">
        <tr>
          <td><span class="badge badge-success" i18n="transaction.descendant|Descendant">Descendant</span></td>
          <td class="txids">
            <app-truncate [text]="cpfpInfo.bestDescendant.txid" [link]="['/tx' | relativeUrl, cpfpInfo.bestDescendant.txid]"></app-truncate>
          </td>
          <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight / 4 | vbytes: 2"></td>
          <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpInfo.bestDescendant.weight | wuBytes: 2"></td>
          <td><app-fee-rate [fee]="cpfpInfo.bestDescendant.fee" [weight]="cpfpInfo.bestDescendant.weight"></app-fee-rate></td>
          <td class="d-none d-lg-table-cell"><fa-icon class="arrow-green" [icon]="['fas', 'angle-double-up']" [fixedWidth]="true"></fa-icon></td>
        </tr>
      </ng-template>
      <ng-template [ngIf]="cpfpInfo?.ancestors?.length">
        <tr *ngFor="let cpfpTx of cpfpInfo.ancestors; trackBy: trackByIndex">
          <td><span class="badge badge-primary" i18n="transaction.ancestor|Transaction Ancestor">Ancestor</span></td>
          <td class="txids">
            <app-truncate [text]="cpfpTx.txid" [link]="['/tx' | relativeUrl, cpfpTx.txid]"></app-truncate>
          </td>
          <td *only-vsize class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight / 4 | vbytes: 2"></td>
          <td *only-weight class="d-none d-lg-table-cell" [innerHTML]="cpfpTx.weight | wuBytes: 2"></td>
          <td><app-fee-rate [fee]="cpfpTx.fee" [weight]="cpfpTx.weight"></app-fee-rate></td>
          <td class="d-none d-lg-table-cell"><fa-icon *ngIf="roundToOneDecimal(cpfpTx) < roundToOneDecimal(tx)" class="arrow-red" [icon]="['fas', 'angle-double-down']" [fixedWidth]="true"></fa-icon></td>
        </tr>
      </ng-template>
    </tbody>
  </table>
</div>